<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`"
             style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <div style="font-size: 20px">{{infor.count}}</div>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-pie v-if="pieData.length>0" style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
        <Card shadow>
          <chart-bar v-if="barData!=null" style="height: 300px;" :value="barData" text="最近UV数据"/>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import InforCard from '_c/info-card'
  import CountTo from '_c/count-to'
  import {ChartPie, ChartBar} from '_c/charts'
  import {nowData} from '@/api/server'

  export default {
    name: 'home',
    components: {
      InforCard,
      CountTo,
      ChartPie,
      ChartBar
    },
    data() {
      return {
        inforCardData: [],
        pieData: [],
        barData: null,
        week: [],
      }
    },
    mounted() {
      this.nowData();
    },
    methods: {
      nowData() {
        const _this = this;
        nowData().then(res => {
          let da = res.data.data;
          let mem = res.data.mem;
          _this.pieData = [];
          _this.pieData.push({value: da.androidPlatform, name: 'Android平台'})
          _this.pieData.push({value: da.iosPlatform, name: '苹果平台'})
          _this.pieData.push({value: da.pcPlatform, name: 'PC平台'})
          _this.pieData.push({value: da.otherPlatform, name: '其他平台'})
          _this.inforCardData = [];
          _this.inforCardData.push({title: '今日UV', icon: 'md-person-add', count: da.uv, color: '#2d8cf0'})
          _this.inforCardData.push({title: '今日PV', icon: 'ios-pulse', count: da.pv, color: '#19be6b'})
          _this.inforCardData.push({title: '当前使用内存', icon: 'ios-analytics', count: mem.used, color: '#ff9900'})
          _this.inforCardData.push({title: '可用最大内存', icon: 'ios-speedometer', count: mem.max, color: '#ed3f14'})
          _this.inforCardData.push({title: 'JVM可用内存量', icon: 'ios-timer', count: mem.committed, color: '#E46CBB'})
          _this.inforCardData.push({title: '初始内存量', icon: 'ios-speedometer-outline', count: mem.init, color: '#9A66E4'})
          _this.barData = {}
          for (let a of res.data.week) {
            let t = a.createTime;
            let d = a.uv;
            _this.barData[t] = d;
          }
        });
      }
    }
  }
</script>

<style lang="less">
  .count-style {
    font-size: 50px;
  }
</style>
